<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
	<title>游乐网——幻之大地</title>
	<link rel="stylesheet" href="${ctxStatic}/layui/css/layui.css">
	<link rel="stylesheet" type="text/css" href="${ctxStatic}/css/fantasy-login.css">
</head>
<body>
 <div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-md6">
		<img src="${ctxStatic}/images/fantasy/logo.gif" border="0" width="100%" height="100%">
    </div>
    <div class="layui-col-md6">
		<div class="layui-row">
			<img class="navimg" src="${ctxStatic}/images/fantasy/enter.gif">
		</div>
		<div class="layui-row">
			<form class="layui-form" action="${ctx}/fantasy/user/login.do" method="post">
		        <div class="layui-form-item">
		        	 <label class="layui-form-label">用户名：</label>
		        	 <div class="layui-input-inline">
		        	 	<input type="text" class="layui-input" id="username" name="username" placeholder="请输入用户名" value="">
		        	 </div>
		        </div>
		        <div class="layui-form-item">
		        	 	<label class="layui-form-label">密　码：</label>
		        	 <div class="layui-input-inline">
		        	 	<input type="password" class="layui-input" id="password" name="password" placeholder="请输入密码" value="">
		        	 </div>
		        </div>
		        <div class="layui-form-item">
		        	 <div class="layui-input-block">
		        	 	<input class="layui-input layui-input-inline-short" style="width:100px;" type="text" id="inputCode" name="inputCode" placeholder="验证码">
			            <img class="codeimg" style="cursor:pointer;" id="codeImg" alt="点击更换" title="点击更换" src="" />
			            <input class="layui-btn layui-btn-primary" id="submitlogin" type="button" onclick="javascript:login();" value="登录">
		        	 </div>
		             
		        </div>
		        <div class="layui-form-item">
			        <div class="layui-input-block"> 
			        	<a href="javascript:w()"><font color="ff0000"><b>我忘记密码了！</b></font></a>
			        </div>
		        	 
		        </div>
		    </form>
		    <div id="errorinfo" style="margin-top:10px;color: red;width:130px;">&nbsp;</div>
		
		</div>
		<div class="layui-row">
			<a href="youle/about/new.jsp"><img class="navimg" src="${ctxStatic}/images/fantasy/new.gif"></a>
		</div>
		<div class="layui-row">
			<a href="youle/about/about.jsp"><img class="navimg" src="${ctxStatic}/images/fantasy/about.gif"></a>
		</div>
		<div class="layui-row">
			<a href="youle/about/help.jsp"><img class="navimg" src="${ctxStatic}/images/fantasy/help.gif"></a>
		</div>
		<div class="layui-row">
			<a href="youle/about/version.jsp"><img class="navimg" src="${ctxStatic}/images/fantasy/version.gif"></a>
		</div>
    </div>
  </div>
</div>
<!-- 你的HTML代码 -->
 
</body>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="${ctxStatic}/easyui/jquery.min.js"></script>
<script src="${ctxStatic}/layui/layui.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/login.js"></script> 
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
});

$(function() {
	
  var oInput = $('#loginform').find('input.form-control');
  var oUser =$('#username');
  oUser.focus();
  var oPassword = $('#password');
  var oInputCode =$('#inputCode');
  $('input[type=button]').click(function(){
     if(oUser.val()==''){
       oUser.css({'border':'1px solid #fa2b48'});
     }
     if(oPassword.val()==''){
       oPassword.css({'border':'1px solid #fa2b48'});
     }
     if(oInputCode.val()==''){
       oInputCode.css({'border':'1px solid #fa2b48'});
     }
  });
	oInput.focus(function(){
    var w = $(this).width()-2+'px';
    var h =$(this).height()-2+'px';
	var idPassword=$(this).attr('id');
    $(this).css({'border':'1px solid #06bbe7','background-color':'#fff','width':w,'height':h});
	
	if(idPassword && idPassword=='password'){
		$(this).addClass('key');
	}
	});
  oInput.blur(function(){
    var w = $(this).width()+2+'px';
    var h =$(this).height()+2+'px';
    $(this).css({'border':'none','background-color':'#f1f1f1','width':w,'height':h});
	$(this).removeClass('key');
      
  });
});
</script> 
</html>